<template>
  <view class="container">
    <view class="background-container">
      <image class="header-bg" src="@/static/headerBgi2.png" mode="widthFix">
      </image>
    </view>
    <view class="status-bar" v-if="!isApp"></view>
    <view class="navbar">
      <image class="navbarImg" @click="goBack" src="@/static/back.png" mode="aspectFill"></image>
      岗位详情
    </view>
    <!-- 详细内容 -->
    <view class="detailContainer">
      <view class="name">{{currentDetail?.post}}</view>
      <view class="contact">
        <view class="info">
          <view class="detailContact">
            <image src="@/static/contact.png"></image>
            <view class="charge">{{currentDetail?.contact}}</view>
            <view class="divider"></view>
            <view class="phone">{{currentDetail?.number}}</view>
          </view>
          <view class="sit">
            <image src="@/static/company.png"></image>
            <view style="flex: 1; word-break: break-all;">{{currentDetail?.unit}}</view>
          </view>
        </view>
        <view class="count">
          <view class="number">
            {{currentDetail?.quantity - currentDetail?.recruited ||0}}
          </view>
          岗位数量
        </view>
      </view>
      <view class="detailContent">
        <view class="plan" :style="{fontSize:'30rpx',color:'#474b53'}">
          <view class="detailName">
            规划编制、重点课题名称
          </view>

          <view class="detailText">
            {{currentDetail?.project}}
          </view>
        </view>
        <view class="goal">
          <view class="detailName">
            课题研究目标
          </view>

          <view class="detailText">
            <rich-text :nodes="currentDetail?.content || ''"  class="rich-text-content"></rich-text>
          </view>
        </view>
        <view class="school">
          <view class="detailName">
            意向高校或专业
          </view>

          <view class="detailText">
            {{currentDetail?.intention}}
          </view>
        </view>
        <view class="remark">
          <view class="detailName">
            备注
          </view>

          <view class="detailText">
            {{currentDetail?.remark}}
          </view>
        </view>
        <view class="detailDiviler"></view>
        <view class="attachment">
          <view class="detailName">报名表附件</view>
          <view class="detailWord" @click="downloadFile">
            <image src="@/static/word.png" class="icon"></image>
            <view class="text">青年实干家计划报名表.docx</view>
            <image src="@/static/downLoadTemplateBtn.png" class="downLoand"></image>
          </view>
        </view>
        <view class="remaind" :style="{marginTop:'24rpx'}">
          <view :style="{color:'#3b7de8',fontSize:'26rpx',display:'initial'}"> 温馨提示：</view>

          <view :style="{color: '#7f8387',fontSize:'26rpx',display:'initial'}">
            报名时需上传填写盖章后的报名表（pdf格式）
          </view>
        </view>

      </view>
    </view>
    <view class="signup">
      <button @click="signup">立即报名</button>
    </view>
  </view>
</template>

<script setup>
  import {
    ref,
    onMounted
  } from 'vue';
  import {
    getQuestByid,
    downloadRequirementDoc
  } from '../../api/detail/position.js';

  const currentDetail = ref(null);

  onMounted(async () => {
    const pages = getCurrentPages();
    const currentPage = pages[pages.length - 1];
    const id = currentPage.options.id;

    if (id) {
      try {
        const res = await getQuestByid(id);
        if (res.code === 200 && res.data && res.data.length > 0) {
          currentDetail.value = res.data[0];
        } else {
          uni.showToast({
            title: '未找到详情数据',
            icon: 'none'
          });
        }
      } catch (error) {
        console.error('Failed to fetch detail:', error);
        uni.showToast({
          title: '获取详情失败',
          icon: 'none'
        });
      }
    }
  });

  const signup = () => {
    const pages = getCurrentPages();
    const currentPage = pages[pages.length - 1];
    const id = currentPage.options?.id || currentDetail.value?.id;
    console.log(id);

    if (id) {
      uni.navigateTo({
        url: '/pages/signup/signup?requireId=' + encodeURIComponent(id)
      });
    } else {
      uni.showToast({
        title: '参数错误',
        icon: 'none'
      });
    }
  }

  const downloadFile = async () => {
    try {
      uni.showLoading({
        title: '准备下载...'
      });

      await downloadRequirementDoc();

      uni.hideLoading();
      uni.showToast({
        title: '下载已开始',
        icon: 'success',
        duration: 2000
      });
    } catch (error) {
      console.error('下载失败:', error);
      uni.hideLoading();
      uni.showToast({
        title: error.message || '下载失败',
        icon: 'none',
        duration: 2000
      });
    }
  };
  //返回首页
  const goBack = () => {
    uni.navigateBack({
      delta:1
    })
  };
</script>

<style>
  .container {
    position: relative;
    width: 100%;
  }

  .background-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 128rpx;
    overflow: hidden;
    z-index: -1;
  }

  .header-bg {
    width: 100%;
    height: 100%;
  }

  .status-bar {
    height: var(--status-bar-height);
  }

  .navbar {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 36rpx;
    text-align: center;
    height: calc(128rpx - var(--status-bar-height));
    position: relative;
  }

  .navbarImg {
    position: absolute;
    left: 21rpx;
    top: 50%;
    transform: translateY(-50%);
    width: 19rpx;
    height: 33rpx;
  }

  .detailContainer {
    margin: 45rpx 30rpx;
  }

  .name {
    font-size: 34rpx;
    color: #474b53;
    margin-bottom: 30rpx;
    font-weight: bold;
  }

  .contact image {
    width: 36rpx;
    height: 36rpx;
    display: inline-block;
    margin-right: 17rpx;
    flex-shrink: 0;
  }

  .contact {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 42rpx;
    border-bottom: 2rpx solid #f4f6f7;
  }

  .info {
    flex: 1;

  }

  .count {
    color: #3b7de8;
    font-size: 20rpx;
    width: 104rpx;
    height: 84rpx;
    border-radius: 10rpx;
    text-align: center;
    background-color: #f8f9fd;
  }

  .number {
    font-size: 34rpx;
    font-weight: bold;
  }

  .detailContact {
    font-size: 26rpx;
    align-items: center;
    color: #7f8387;
    display: flex;
    margin-bottom: 12rpx;
  }

  .divider {
    width: 1rpx;
    height: 20rpx;
    background-color: #b7bbbe;
    margin: 0 17rpx;
    padding-bottom: 20rpx;
  }

  .sit {
    font-size: 26rpx;
    color: #7f8387;
    display: flex;
    align-items: center;
  }

  .workDetail {
    padding: 24rpx 30rpx;
    background-color: #f8f9fd;
    margin: 20rpx 0;
  }

  .workTitle {
    font-size: 26rpx;
    color: #3b7de8;
    width: 104rpx;
    white-space: nowrap;
  }

  .workGoal {
    font-size: 26rpx;
    color: #3b7de8;
    width: 104rpx;
    white-space: nowrap;
  }

  .detailName {
    font-size: 30rpx;
    color: #474b53;
    font-weight: bold;
    margin: 24rpx 0;
  }

  .detailText {
    box-sizing: border-box;
    background-color: #f8f9fd;
    font-size: 26rpx;
    color: #474b53;
    border-radius: 10rpx;
    min-height: 74rpx;
    padding: 24rpx 20rpx;
    white-space: pre-wrap;
    word-break: break-word;
  }

  .detailDiviler {
    border-bottom: 2rpx solid #f4f6f7;
    margin-top: 42rpx;
  }

  .detailWord {
    align-items: center;
    box-sizing: border-box;
    background-color: #f8f9fd;
    font-size: 26rpx;
    color: #474b53;
    border-radius: 10rpx;
    min-height: 74rpx;
    padding: 24rpx 20rpx;
    display: flex;
  }

  .detailWord .icon {
    width: 56rpx;
    height: 70rpx;
    margin-right: 20rpx;

  }

  .detailWord .text {
    flex: 1;
  }

  .detailWord .downLoand {
    width: 27rpx;
    height: 30rpx;
  }

  .signup {
    padding: 17rpx 30rpx 30rpx 30rpx;
    box-shadow: 0 -1rpx 8rpx rgba(221, 231, 232, 0.3);
  }

  .signup button {
    background-color: #3b7de8;
    color: #ffffff;
    font-size: 28rpx;
    text-align: center;
    width: 690rpx;
    height: 64rpx;
  }

  .rich-text-content {
    width: 100%;
    overflow-x: hidden;
    word-break: break-all;
  }

  .detailWord {
    display: flex;
    align-items: center;
    padding: 24rpx 0;
    cursor: pointer;
  }

  .detailWord .icon {
    width: 32rpx;
    height: 32rpx;
    margin-right: 12rpx;
  }

  .detailWord .text {
    flex: 1;
    font-size: 26rpx;
    color: #474b53;
  }

  .detailWord .downLoand {
    width: 32rpx;
    height: 32rpx;
  }
</style>